<template>
  <div class="register_container">

    <div class="registerBox">
      <el-form ref="form" :rules="rules" :model="user" label-width="80px">
        <h3 class="login-title">注册</h3>
        <el-form-item label="用户名" prop="username">
          <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
        </el-form-item>

        <el-form-item label="电话" prop="phone">
          <el-input type="text" placeholder="请输入电话" v-model="user.phone"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" placeholder="请输入密码" v-model="user.password"/>
        </el-form-item>
        <el-form-item label="确认密码" prop="passwordCheck">
          <el-input type="password" placeholder="请确认密码" v-model="user.passwordCheck"/>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="user.gender" label="1">男</el-radio>
          <el-radio v-model="user.gender" label="2">女</el-radio>
        </el-form-item>
        <el-form-item label="真实姓名" prop="true_name">
          <el-input placeholder="选填" v-model="user.true_name"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">注册</el-button>
          <el-button @click="() => {this.$refs.form.resetFields();this.$router.push('/login')}">返回登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    //  密码验证
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (value.length < 3 || value.length > 10) {
        callback(new Error('长度在3到10个字符'));
      } else {
        if (this.user.passwordCheck !== '') {
          this.$refs.form.validateField('passwordCheck');
        }
        callback();
      }
    };
    // 确认密码验证
    var validatePass2 = (rule, value, callback) => {

      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.user.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    // 电话号码验证
    var checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/;
      if (!value) {
        return callback(new Error('电话号码不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (phoneReg.test(value)) {
            callback()
          } else {
            callback(new Error('电话号码格式不正确'))
          }
        }
      }, 100);
    };
    return {
      user: {
        id: null,
        username: '',
        password: '',
        passwordCheck: '',
        phone: '',
        wallet: 0.0,
        true_name: '',
        gender: '1',
        type: 1,
        createTime: null,
      },

      // 表单验证，需要在 el-form-item 元素中增加 prop 属性
      rules: {
        username: [
          {required: true, message: '账号不可为空', trigger: 'blur'},
          {
            min: 3,
            max: 10,
            message: '长度在3到10个字符',
            trigger: 'blur'
          }
        ],
        password: [
          {required: true, validator: validatePass, trigger: 'blur'}
        ],
        passwordCheck: [
          {required: true, validator: validatePass2, trigger: 'blur'}
        ],
        phone: [
          {required: true, trigger: 'blur', validator: checkPhone}
        ]
      },
    };
  },
  computed: {},
  methods: {
    //提交注册请求
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$axios({
            method: 'post',
            url: '/main/register',
            data: {
              username: this.user.username,
              password: this.user.password,
              phone: this.user.phone,
              gender: this.user.gender,
              type: this.user.type,
              trueName: this.user.true_name,
              creatTime: new Date().getTime()
            }
          })
              .then(response => {
                if (response.data.success) {
                  this.$message.success("注册成功！");
                } else {
                  return this.$message.error("注册失败！");
                }
              })
              .catch(error => {
                console.log(error);
              });
        } else {
          return this.$message.error("信息填写不完整！");
        }
      });
    },
  }
}
</script>

<style scoped>
.register_container {
  background-color: #2b4b6b;
  height: 100%;
}

.registerBox {
  border: 1px solid #DCDFE6;
  width: 350px;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
}

.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #303133;
}

</style>
